<template>
  <div id="data-view">
    <div class="data-content">
      <div class="con-center fl">
        <Left-Top-Chart-1 :depCode="depCode" />
        <Top-Middle-Map :depCode="depCode" @mapChoose="changeDepCode" />
        <ztqkLdt :depCode="depCode" />
      </div>
      <div class="con-right fr">
        <ztqkXzJgs :depCode="depCode" />
        <ztqkSyJgs :depCode="depCode" />
        <ztqkBzs :depCode="depCode" />
        <ztqkLdzs :depCode="depCode" />
      </div>
    </div>
  </div>
</template>

<script>
import LeftTopChart1 from './LeftTopChart1'
import TopMiddleMap from './TopMiddleMap'
import ztqkLdt from './ztqkLdt'
import ztqkXzJgs from './ztqkXzJgs'
import ztqkSyJgs from './ztqkSyJgs'
import ztqkBzs from './ztqkBzs'
import ztqkLdzs from './ztqkLdzs'

export default {
  name: 'HomeMap',
  components: {
    LeftTopChart1,
    TopMiddleMap,
    ztqkLdt,
    ztqkXzJgs,
    ztqkSyJgs,
    ztqkBzs,
    ztqkLdzs
  },
  props: {
    depCode: {
      type: String
    }
  },
  data() {
    return {}
  },
  mounted() {
    //this.depCode = this.$route.query.depCode
  },
  methods: {
    changeDepCode(paramDepCode) {
      console.log('mapChoose=' + paramDepCode)
      this.depCode = paramDepCode
      this.$parent.chooseDep(this.depCode) //调用父路由的方法
    }
  }
}
</script>

<style lang='scss'>
#data-view {
  width: 100%;
  height: calc(100% - 80px);
  background-size: 100% 100%;
  color: #fff;

  .data-content {
    width: 100%;
    margin: 0, auto;
    height: 100%;
    box-sizing: border-box;

    .con-center {
      width: 70%;
      height: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      position: relative;
    }
    .con-right {
      width: 30%;
      height: 100%;
    }
  }
}
</style>
